<template>
  <div class="container">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDialog"
    >
      <el-form ref="refsubjects" :rules="rules" :model="FormData">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="FormData.subjectName" style="width: 180px" />
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <!-- <el-switch
            v-model="FormData.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->

          <el-tooltip
            :content="'Switch value: ' + FormData.isFrontDisplay"
            placement="top"
          >
            <el-switch
              v-model="FormData.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects.js'
// import subjectsVue from '../pages/subjects.vue'
export default {
  props: {
    dialogVisible: {
      typeof: Boolean,
      default: false
    },
    tableData: {
      // typeof: Array,
      required: true
    }
  },
  data () {
    const checkName = (rule, value, cb) => {
      // console.log(this.tableData)
      const res = this.tableData.map((item) => item.subjectName)
      // console.log(value)
      // console.log(rule)
      // console.log(this.FormData.subjectName)
      if (this.FormData.id && this.FormData.subjectName === value) {
        return cb()
      }

      res.some((ress) => ress === value)
        ? cb(new Error(`已经存在 ${value} 部门`))
        : cb()

      // 添加
    }
    return {
      FormData: {
        id: null,
        subjectName: '',
        isFrontDisplay: 1
      },

      rules: {
        subjectName: [
          {
            required: true,
            message: '请输入学科名称',
            trigger: ['change', 'blur']
          },
          { validator: checkName, trigger: ['change'] }
        ]
      }
    }
  },
  methods: {
    closeDialog () {
      // console.log(1)
      this.$emit('update:dialogVisible', false)
    },
    // 修改

    // 点击确定添加
    confirmAdd () {
      // console.log(1)
      // subjectName isFrontDisplay参数

      this.$refs.refsubjects.validate(async (boo) => {
        // console.log(boo)
        if (!boo) return console.log(boo)
        if (this.FormData.id) {
          // console.log(this.FormData.id)
          await update(this.FormData)
          // console.log(res)
        } else {
          await add({ ...this.FormData })
          // console.log(data)
        }
        this.$emit('adddata')
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
